<template>
  <div class="screen-center">
    <screen-left></screen-left>
    <screen-right></screen-right>
    <!-- <passenger-transport-detail-dialog></passenger-transport-detail-dialog>
    <traveller-detail-dialog></traveller-detail-dialog>
    <vehicle-info-dialog></vehicle-info-dialog> -->
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import screenLeft from '../screenLeft/index.vue'
import screenRight from '../screenRight/index.vue'
// @ts-ignore
import ThreejsBusinessMap from './ThreejsBusinessMap.js'
import { guangxiFullDistrict } from 'api/situationAwareness/coachBusWay/screenCenter'
// import passengerTransportDetailDialog from './passengerTransportDetailDialog.vue'
// import travellerDetailDialog from './travellerDetailDialog.vue'
// import vehicleInfoDialog from './vehicleInfoDialog.vue'
@Component({
  name: 'screen-center',
  components: {
    screenLeft,
    screenRight
    // passengerTransportDetailDialog,
    // travellerDetailDialog,
    // vehicleInfoDialog
  }
})

export default class ScreenCenter extends Vue {
  mounted() {
    this.getChinaFullDistrict()
  }

  async getChinaFullDistrict() {
    try {
      const res = await guangxiFullDistrict()
      // console.log('获取广西地图', res)
      return new ThreejsBusinessMap({ mapData: res })
    } catch (err) {
      console.error('获取广西地图', err)
    }
  }
}
</script>

<style lang="scss" scoped>
.screen-center {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
